<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/include.inc.jsp" %>
<!DOCTYPE html>

<html>
<head>
    <%@include file="/WEB-INF/views/layout/miiteen/base.ref.jsp" %>
    <style>
        .file-uploads {
            overflow: hidden;
            position: relative;
            text-align: center;
            display: inline-block;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .edit .el-form .el-form-item__content {
            max-width: 220px;
            position: relative;
        }

        .imgbox {
            display: inline-block;
            position: absolute;
            top: 0;
            margin-left: 160px;
            background-color: #fbfdff;
            border: 1px dashed #c0ccda;
            border-radius: 6px;
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            line-height: 100px;
        }

        .imgbox:hover:after {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            content: attr(data-text);
            transition: all 1s ease;
            transform: translateY(0);
            color: #FFF;
        }

        .imgbox img {
            width: 100%;
            height: 100%;
        }

        .file-uploads:hover, .file-uploads:focus {
            border-color: #409EFF;
            color: #409EFF;
        }

        .item-action {
            position: absolute;
            z-index: 99;
            display: inline-block;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
        }

        .item-action i {
            display: none;

        }

        .imgbox:hover i {
            display: inline-block;
            color: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translateY(-50%);
        }
    </style>
</head>
<body>
<div class="mainpage edit">
    <!--顶部菜单-->
    <div class="page-topmenu">
        <div class="btn-panel">
            <el-button type="primary" size="small" icon="el-icon-check" @click="save">保存</el-button>
        </div>
        <div class="btn-panel">
            <el-button size="small" icon="el-icon-back" @click="back">返回</el-button>
        </div>
    </div>
    <!--编辑表单-->
    <el-form :ref="formid" :model="form" :rules="rules" size="small" :label-width="labelwidth"
             :label-position="labelposition"
             class="one-col" :validate-on-rule-change="false">

        <!--视业务进行更改-begin-->
        <input type="hidden" v-model="form.id"/>
        <el-form-item label="综合资料类型" prop="dataTypeId">

            <el-select v-model="form.dataTypeId" placeholder="请选择" @change="handleChange($event)" >
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" placeholder="标题"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="publishTime">
            <el-date-picker
                    v-model="form.publishTime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    :picker-options="pickerOptions"
                    placeholder="选择预计出车时间"
                    default-time="00:00:00" style="width: 100%;">
            </el-date-picker>
        </el-form-item>


        <el-form-item label="目录类别:" prop="catalogCategory" v-if="flag">
            <el-date-picker v-model="form.catalogCategory"
                            format="yyyy-MM"
                            value-format="yyyy-MM"
                            type="month" placeholder="选择时间">
            </el-date-picker>
        </el-form-item>

        <el-form-item label="文档" prop="image" v-if="flag">
            <file-upload
                    ref="upload"
                    post-action="/uploadfile/file"
                    :maximum="9"
                    extensions="doc,docx,pdf"
                    accept=".doc,.docx,.pdf"
                    :multiple="true"
                    multiple
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :thread="9"
            >
                <i slot="default" class="el-icon-plus" style="font-size: 28px"></i>
            </file-upload>
            <div class="el-upload__tip">只能上传word/pdf文件</div>
            <div class="imgbox" v-for="(item,index) in dialogImageUrl" :key="index.toString()"
                 :style="{marginLeft: (index+ 1)* 110 + 'px'}"
            >

                <img width="100%" :src="item" alt="" mode="scaleToFill">
                <span class="item-action">
                    <i class="el-icon-zoom-in" style="left: 16%;font-size: 28px" @click="handlePreview(index,item)"></i>
                    <i class="el-icon-delete" style="left: 60%;font-size: 28px" @click="handleRemove(index)"></i>
                </span>
            </div>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl" alt="">
            </el-dialog>
        </el-form-item>

        <el-form-item label="图片" prop="image" v-if="!flag">
            <file-upload
                    ref="upload"
                    post-action="/uploadfile/upload"
                    :maximum="9"
                    extensions="gif,jpg,jpeg,png,webp"
                    accept="image/png,image/gif,image/jpeg,image/webp"
                    :multiple="true"
                    multiple
                    @input-file="inputFile"
                    @input-filter="inputFilter"
                    :thread="9"
            >
                <i slot="default" class="el-icon-plus" style="font-size: 28px"></i>
            </file-upload>
            <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            <div class="imgbox" v-for="(item,index) in dialogImageUrl" :key="index.toString()"
                 :style="{marginLeft: (index+ 1)* 110 + 'px'}"
            >

                <img width="100%" :src="item" alt="" mode="scaleToFill">
                <span class="item-action">
                    <i class="el-icon-zoom-in" style="left: 16%;font-size: 28px" @click="handlePreview(index,item)"></i>
                    <i class="el-icon-delete" style="left: 60%;font-size: 28px" @click="handleRemove(index)"></i>
                </span>
            </div>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="imageUrl" alt="">
            </el-dialog>
        </el-form-item>




        <el-form-item label="内容" prop="content">
            <el-input type="textarea" v-model="form.content" placeholder="内容"></el-input>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="form.author" placeholder="作者"></el-input>
        </el-form-item>
        <el-form-item label="是否显示" prop="isDisplay">
            <el-radio-group v-model="form.isDisplay">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
            </el-radio-group>
        </el-form-item>
  <%--      <el-form-item label="部门" prop="department">
            <el-input v-model="form.department" placeholder="部门" @focus="selectDept"></el-input>
        </el-form-item>--%>
    </el-form>


</div>
<script>
    //初始化数据，必须放置在列表页面封装部分前
    function initVueOption(obj) {
        //设置控制器
        obj.data.controller = "${ctx}/data/datainfo";
        //设置表单数据
        obj.data.form = ${dataInfo};
        obj.data.flag=obj.data.form.typeYlzd2==1?true:false;
        //设置校验规则，没有则删掉
        obj.data.rules = {
            publishTime:[{
                required:true,
                message:'请选择发布时间',
                trigger:'blur'
            }]
        }

        obj.data.options=obj.data.form.dataTypeList;


        //小于当前时间不可选
        obj.data.pickerOptions={
            disabledDate:function(time){
                return time.getTime()<=Date.now()-8.64e7;
            },
        }
        //默认选择
        if(obj.data.form.isDisplay==0){
            obj.data.form.isDisplay=1;
        }

        //选择部门
        obj.methods.selectDept = function () {
            miiteen.customsearch.open("sysDepartment", function (result) {
                var param = result[0];
                Page.form.deptId = param.result1;
                Page.form.department = param.result2;
                console.log();
            }, {
                title: "部门选择",
                type: "tree",
                multiple: false,
                con: {deptIds: "${deptIds}"}
            })
        }


        //上传图片=====================begin===============================
        obj.data.dialogVisible = false;
        obj.data.dialogImageUrl = [];
        obj.data.imageUrl = '';
        //图片回显
        if (obj.data.form.list.length>0) {
            for(var i=0;i<obj.data.form.list.length;++i){
                obj.data.dialogImageUrl.push(obj.data.form.list[i].image);
            }
        }
        //删除图片
        obj.methods.handleRemove = function (i) {
            obj.data.dialogImageUrl.splice(i, 1)
            Page.form.list.splice(i, 1);
            console.log(obj.data.dialogImageUrl.length);
            console.log(Page.form.list.length);
        }
        obj.methods.handleChange = function(val){
            obj.data.dialogImageUrl =[];
            Page.form.list=[];
            obj.data.options.forEach(function (item) {
                if(item.id==val){
                    if(item.ylzd2 == 1){

                        obj.data.flag = true;
                    }else{
                        obj.data.flag = false;

                    }
                }
            })
            // console.log(val)
            // console.log(obj.data.options)
        }
        //显示（放大）
        obj.methods.handlePreview = function (i, file) {
            obj.data.imageUrl = file;
            obj.data.dialogVisible = true;
        }

        obj.methods.inputFile = function (newFile, oldFile) {
            // 自动上传
            if (Boolean(newFile) !== Boolean(oldFile) || oldFile.error !== newFile.error) {
                if (!this.$refs.upload.active) {
                    this.$refs.upload.active = true
                }
            }
            //上传成功
            if (newFile && oldFile && !newFile.active && oldFile.active) {

                var userAgent = navigator.userAgent;
                var resData = null;
                if (userAgent.indexOf("MSIE 9.0") > -1) { //判断是否是ie 9浏览器
                    resData = newFile.response
                } else {
                    resData = JSON.parse(newFile.response);
                }
                if (resData.state == 1) {
                    obj.data.dialogImageUrl.push(resData.data);
                    var image={id:0,dataId:0,image:resData.data,delState:0};
                    Page.form.list.push(image);
                    if(obj.data.flag){ //文档

                        if (obj.data.dialogImageUrl.length >1) {
                            this.$refs.upload.active = false;
                            obj.data.dialogImageUrl=obj.data.dialogImageUrl.slice(0,1);
                            this.$message.error('只能上传1张!');
                        }else{
                            this.$message.success("文档上传成功！")
                        }
                    }else{  //图片
                        if (obj.data.dialogImageUrl.length >9) {
                            this.$refs.upload.active = false;
                            obj.data.dialogImageUrl=obj.data.dialogImageUrl.slice(0,1);
                            this.$message.error('只能上传8张!');
                        }
                    }

                }






            }
        },
            //上传之前
            obj.methods.inputFilter = function (newFile, oldFile, prevent) {
                if (newFile && !oldFile) {
                    // 过滤不是图片后缀的文件
                    if (obj.data.flag){
                        if (!/\.(docx|doc|pdf|gif)$/i.test(newFile.name)) {
                            this.$message.error('只能上传wrod/pdf文件,请重新上传');
                            return prevent()
                        }
                    }else{
                        if (!/\.(jpeg|jpe|jpg|gif|png|webp)$/i.test(newFile.name)) {
                            this.$message.error('只能上传jpg/png文件，且不超过500kb,请重新上传');
                            return prevent()
                        }
                    }


                }
            }
        //上传图片=====================end=================================

    }
</script>
<!--编辑页面封装部分-->
<%@include file="/WEB-INF/views/layout/miiteen/page.edit.ref.jsp" %>
</body>
</html>
